<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
// 考勤人数
import echarts from "echarts"; // echarts theme
// import resize from './mixins/resize'
// require('echarts/theme/macarons')

export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: ".2rem"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
    // window.onresize = () => {
    //   this.initChart();
    // };
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ chartData, chartName } = {}) {
      // var index = 0; //播放所在下标
      // let self = this;
      // setInterval(function() {
      //   self.chart.dispatchAction({
      //     type: "showTip",
      //     seriesIndex: 0,
      //     dataIndex: index
      //   });
      //   index++;
      //   if (index > chartData.length) {
      //     index = 0;
      //   }
      // }, 1000);
      const COLOR = [
        { color1: "#04e9ef", color2: "#01383a" },
        { color1: "#1e86fd", color2: "#082546" },
        { color1: "#10fd04", color2: "#054601" },
        { color1: "#9ff4f6", color2: "#0a2f58" },
        { color1: "#e337a2", color2: "#58113d" }
      ];
      this.chart.setOption({
        backgroundColor: "transparent",
        // title: {
        //   text: "",
        //   textStyle: {
        //     align: "center",
        //     color: "#fff",
        //     fontSize: 20,
        //   },
        //   top: "5%",
        //   left: "center",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)"
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)"
                  }
                ],
                global: false
              }
            }
          }
        },
        grid: {
          top: "5%",
          left: "12%",
          right: "5%",
          bottom: "30%"
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00"
              }
            },
            axisLabel: {
              color: "#fff",
              // rotate: 90,
              fontSize: this.fontSize(0.11),
              formatter: function(value) {
                //x轴的文字改为竖版显示
                var str = value.split("");
                return str.join("\n");
              }
            },
            splitLine: {
              show: false
            },
            boundaryGap: false,
            data: [
              "上塘街道",
              "祥符街道",
              "半山街道",
              "康桥街道",
              "湖墅街道",
              "小河街道",
              "拱宸桥街道",
              "和睦街道",
              "米市巷街道",
              "大关街道"
            ]
          }
        ],

        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.1)"
              }
            },
            axisLine: {
              show: true
            },
            axisLabel: {
              show: true,
              margin: 20,fontSize: this.fontSize(0.11),
              textStyle: {
                color: "#d1e6eb"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "总量",
            type: "line",
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 4,
            lineStyle: {
              normal: {
                color: COLOR[1].color1,
                shadowColor: "transparent",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5
              }
            },
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: "#6c50f3",
            //   },
            // },
            itemStyle: {
              color: "#6c50f3",
              borderColor: "#fff",
              borderWidth: 1,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2
            },
            tooltip: {
              show: false
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: COLOR[1].color1
                    },
                    {
                      offset: 0,
                      color: COLOR[1].color2
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(108,80,243, 0.9)",
                shadowBlur: 20
              }
            },
            data: [502, 205, 332, 281, 398, 214, 502, 205, 332, 281]
          },
          {
            name: "总量",
            type: "line",
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 4,
            lineStyle: {
              normal: {
                color: COLOR[1].color1,
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5
              }
            },
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: COLOR[1].color1,
            //   },
            // },

            itemStyle: {
              color: "#00ca95",
              borderColor: "#fff",
              borderWidth: 1,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2
            },
            tooltip: {
              show: false
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: COLOR[1].color1
                    },
                    {
                      offset: 0,
                      color: COLOR[1].color1
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0,202,149, 0.9)",
                shadowBlur: 20
              }
            },
            data: [281, 398, 214, 179, 289, 356, 281, 398, 214, 179]
          },
          {
            name: "总量",
            type: "line",
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 4,
            lineStyle: {
              normal: {
                color: COLOR[2].color1,
                shadowColor: "transparent",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5
              }
            },
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: COLOR[2].color1,
            //   },
            // },
            itemStyle: {
              color: "#6c50f3",
              borderColor: "#fff",
              borderWidth: 1,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2
            },
            tooltip: {
              show: false
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: COLOR[2].color1
                    },
                    {
                      offset: 0,
                      color: COLOR[2].color2
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(108,80,243, 0.9)",
                shadowBlur: 20
              }
            },
            data: [402, 205, 432, 681, 498, 214, 502, 305, 132, 481]
          },
          {
            name: "总量",
            type: "line",
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 4,
            lineStyle: {
              normal: {
                color: COLOR[3].color1,
                shadowColor: "transparent",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5
              }
            },
            // label: {
            //   show: false,
            //   position: "top",
            //   textStyle: {
            //     color: "red",
            //   },
            // },
            itemStyle: {
              color: "#6c50f3",
              borderColor: "#fff",
              borderWidth: 1,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2
            },
            tooltip: {
              show: false
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: COLOR[3].color1
                    },
                    {
                      offset: 0,
                      color: COLOR[3].color2
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(108,80,243, 0.9)",
                shadowBlur: 20
              }
            },
            data: [202, 305, 432, 581, 198, 514, 602, 305, 532, 181]
          },
          {
            name: "总量",
            type: "line",
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 4,
            lineStyle: {
              normal: {
                color: COLOR[4].color1,
                shadowColor: "transparent",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5
              }
            },
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: "#6c50f3",
            //   },
            // },
            itemStyle: {
              color: "#6c50f3",
              borderColor: "#fff",
              borderWidth: 1,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2
            },
            tooltip: {
              show: false
            },
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(
            //       0,
            //       0,
            //       0,
            //       1,
            //       [
            //         {
            //           offset: 0,
            //           color: COLOR[4].color1,
            //         },
            //         {
            //           offset: 0,
            //           color: COLOR[4].color2,
            //         },
            //       ],
            //       false
            //     ),
            //     shadowColor: "rgba(108,80,243, 0.9)",
            //     shadowBlur: 20,
            //   },
            // },
            data: [102, 405, 532, 681, 398, 414, 202, 405, 532, 181]
          }
        ]
      });
    },
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1920);
      return res * fontSize;
    }
  }
};
</script>
